<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习5：DOM操作</title>
		<style type="text/css">
			body{background-color: #AABBCC;}
			
			html,div,ul,li {margin: 0px;padding: 0px;}
			a{cursor: pointer;}
			
			li {list-style: none;cursor: pointer;}
			fieldset {border: #000 1px dashed;width: 225px;height: 225px;padding: 10px;text-align: center;float: left;margin-left: 5px;}
			#cont_left {width: 300px;height: 500px;float: left;}
			#cont_right {float: left;}
			{
				display: none;
			}
			.newcss1{background-color: yellowgreen;}
			.box1{
				border: 3px solid red;
			}
			/* fieldset{
				background-color: greenyellow;
			} */
		</style>
	</head>
	<body>
		<div id="cont_left">
			<ul class="p1"><img src="img/fold.gif"><a onclick="show('menu1')"> 通过DOM获取信息 </a>
				<ul id="menu1">
					<li onclick="showImg()"><img src="img/doc.gif">获取原始图片路径</li>
					<li onclick="getFruit()"><img src="img/doc.gif">获取我喜欢的水果</li>
				</ul>
			</ul>

			<ul class="p1"><img src="img/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
				<ul id="menu2">
					<li onclick="createImg()"><img src="img/doc.gif">创建图片</li>
					<li onclick="cloneImg()"><img src="img/doc.gif">克隆图片</li>
					<li onclick="changeImg()"><img src="img/doc.gif">改变图片</li>
					<li onclick="removeImg()"><img src="img/doc.gif">删除图片</li>
				</ul>
			</ul>

			<ul class="p1"><img src="img/fold.gif"><a onclick="show('menu3')"> 通过DOM操作样式 </a>
				<ul id="menu3">
					<li onclick="changeCss1()"><img src="img/doc.gif">为原始图片加上行间样式</li>
					<li onclick="changeCss2()"><img src="img/doc.gif">为所有的fieldset加上内部样式</li>
				</ul>
			</ul>

		</div>
		<fieldset>
			<legend>原始图片</legend>
			<img id="fruit" src="img/fruit.jpg">
		</fieldset>
		<fieldset>
			<legend>图片路径</legend>
			<p id="msg1">在这里显示</p>
		</fieldset>
		<fieldset>
			<legend>选择你喜欢的水果</legend>
			<ul style="text-align: left;" id="like">
				<li>
					<input name="enjoy" type="checkbox" value="苹果" />苹果
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="香蕉" checked="checked" />香蕉
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="葡萄" />葡萄
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="梨" checked="checked" />梨
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="西瓜" />西瓜
				</li>
			</ul>
			<div id="msg2" style="margin-top: 10px;text-align: left;">你喜欢的水果是：</div>
		</fieldset>
		<fieldset>
			<legend>创建图片</legend>
			<div id="msg3"></div>
		</fieldset>
		<fieldset>
			<legend>克隆图片</legend>
			<div id="msg4"></div>
		</fieldset>
		<script>
			//179000529张书豪
			let list1 = document.querySelectorAll("#cont_left .p1");
			for(let list2 of list1){
				list2.childNodes[3].style.display = "none";
			}
			//获取除本身外的所有兄弟元素
			function siblings(elm) {
				var a = [];
				var p = elm.parentNode.children;
				for (var i = 0, pl = p.length; i < pl; i++) {
					if (p[i] !== elm) a.push(p[i]);
				}
				return a;
			}
			//菜单收缩与扩展
			function show(title) {
				let currentMenu = document.getElementById(title);
				let currentStatus = currentMenu.style.display;			    
				currentMenu.style.display = currentStatus == "" ? "none" : "";
				let i1 = siblings(currentMenu.parentNode);
				for(let i2 of i1){
					i2.childNodes[3].style.display = "none";
				}
			}
			//获取原始图片路径
			function showImg() {
				let src1 = document.querySelector("#fruit");
				document.querySelector("#msg1").innerHTML =  src1.getAttribute("src");
			}
			//获取喜欢的水果
			function getFruit() {
				let i = document.querySelectorAll("#like li input");
				let src2 = document.querySelector("#msg2").innerHTML;
				//重复选择导致的bug
				if(src2.length > 8) src2 = "你喜欢的水果是：";
				for(let list1 of i){
					if(list1.checked) src2 = src2 + list1.value + " ";
				}
				document.querySelector("#msg2").innerHTML = src2;
			}
			//创建图片
			function createImg() {
				let src1 = document.querySelector("#msg3");
				let imgDiv = document.createElement("img");
				src1.appendChild(imgDiv);
				src1.childNodes[0].src = "img/grape.jpg";
			}
			//克隆图片
			function cloneImg() {
				 let newNode = document.querySelector("#fruit").cloneNode(true);
				 document.querySelector("#msg4").appendChild(newNode);
			}
			//改变图片
			function changeImg() {
				let src1 = document.querySelector("#fruit");
				//如果图片删除后再点击改变就创建img
				if(src1 != null){
					src1.setAttribute("src","img/grape.jpg");
				}
			}
			//删除图片
			function removeImg() {
				let src1 = document.querySelector("#fruit").parentNode;
				src1.removeChild(src1.childNodes[3]);
			}
			//操作样式1
			function changeCss1(){
				document.querySelector("#fruit").className = "box1";
			}
			//操作样式2
			function changeCss2(){
				let list1 = document.querySelectorAll("fieldset");
				for(let list2 of list1){
					list2.style.backgroundColor = "greenyellow";
				}
			}
		</script>
	</body>
</html>
